//购物车页面
var cook;

$(function () {

    //判断是否登录
    if (isLogin()) {
        cook = getCookie('username');
        $('.logined').show().find('.user_name').html(cook);
        $('.logg').hide();
        $('.regii').hide();
    }

    //登录后的首页，点击用户中心的退出登录，清除ookie
    $('.user_center .user_4').on('click', function () {
        deleCookie('username');
        $(window).prop('location', 'goods_info.html');
    })

    //显示购物车  接口
    $.get('php/getShoppingCart.php?vipName=' + cook, function (reg) {
        let htmlStr = '';
        let resu = JSON.parse(reg);
        resu.forEach(ele => {
            htmlStr += `
            <tr class="trr">
                    <td>
                        <input type="checkbox" class="tr_all" checked="true">
                    </td>
                    <td><img src="${ele.goodsImg}" alt="" gdsid="${ele.goodsId}"></td>
                    <td>
                        <p class="cont1">${ele.goodsDesc}</p>
                        <p class="cont_color">${ele.beiyong1}</p>
                        <p class="cont2">分期免息</p>
                    </td>
                    <td>
                        <p>
                            ¥<span class="danjia">${ele.goodsPrice}</span>.00
                        </p>
                    </td>
                    <td>
                        <p>
                            <input type="button" value="-" class="jian">
                            <input type="text" class="num" value="${ele.goodsCount}">
                            <input type="button" value="+" class="jia">
                        </p>
                    </td>
                    <td>
                        <p>
                            ¥<span class="xiaopri">${ele.goodsPrice * ele.goodsCount}</span>.00
                        </p>
                    </td>
                    <td>
                        <p><a href="javascript:;" class="dele">删除</a></p>
                    </td>
                </tr>          
            `
        })
        $('.tb1_tbody').html(htmlStr);
        getZongnun();
        getZongpri();
    })

    //全选功能
    //默认都全选
    $('input').prop('checked', true);

    //点击表尾的全选框
    $('.tb_ft .ft_check').on('click', function () {
        //记录全选框的状态
        let flag = $(this).prop('checked');
        $('.tb1 .top_all').prop('checked', flag);
        $('.tb1_tbody').find('.tr_all').prop('checked', flag);
    })

    //每一行的全选框状态改变，头尾的全选框都不再选中
    $('.tb1_tbody').on('click', '.tr_all', function () {
        let arr = [];
        let check = $(this).prop('checked');
        if (check) {
            arr.push(check);
        }
        console.log(arr.length);
        console.log($('.tb1_tbody .tr_all').length);
        if (arr.length == $('.tb1_tbody .tr_all').length) {
            console.log(11);
            $('.tb_ft .ft_check').prop('checked', true);
            $('.tb1 .top_all').prop('checked', true)
        } else {
            console.log(22);
            $('.tb_ft .ft_check').prop('checked', false);;
            $('.tb1 .top_all').prop('checked', false)
        }
    })

    $('.tb1_tbody').on('click', '.jia', function () {
        //获取id
        let id = $(this).parent().parent().parent().find('img').attr('gdsid');
        //点击加，数量加1
        let con = $(this).prev().val();
        con++;
        $(this).prev().val(con);
        changeCon(id, con);
        getXiao($(this), con);

        console.log($(this).parent().parent().parent().find('.tr_all').prop('checked'));
        // if($(this).parent().parent().parent().find('.tr_all').prop('checked')){
        getZongnun();
        getZongpri();
        // }

    })

    $('.tb1_tbody').on('click', '.jian', function () {
        //获取id
        let id = $(this).parent().parent().parent().find('img').attr('gdsid');
        //点击减，数量减1
        let con = $(this).next().val();
        con--;
        if (con <= 1) {
            con = 1;
        }
        $(this).next().val(con);
        changeCon(id, con);

        getXiao($(this), con);
        getZongnun();
        getZongpri();
    })
})

//点击删除，调用删除购物车接口
$('.tb1_tbody').on('click', '.dele', function () {
    //获取goodsid
    let id = $(this).parent().parent().parent().find('img').attr('gdsid');
    //记录this指向
    let that = $(this);
    let confi = confirm('确定删除？');
    if (confi) {
        $.get('php/deleteGoods.php?vipName=' + cook + '&goodsId=' + id, function (reg) {
            if (reg == '1') {
                //this改变指向？
                getDeleshop(that);
                alert('删除成功!');
                that.parent().parent().parent().remove();
            } else {
                alert('删除失败!');
            }
        })
    }

    chongBy();
})

//商品数量改变  接口
function changeCon(id, num) {
    //id 商品编号
    //num 此时商品的数量
    $.get('php/updateGoodsCount.php?vipName=' + cook + '&goodsId=' + id + '&goodsCount=' + num, function (reg) {
        if (reg == '1') {
            console.log('修改成功');
        } else {
            console.log('修改失败');
        }
    })
}

//每行小计
function getXiao(obj, con) {
    //获取单价
    let pri = parseInt(obj.parent().parent().prev().find('.danjia').text());
    //设置每行小计
    obj.parent().parent().next().find('.xiaopri').text(pri * con);
}

//总共数量
function getZongnun() {
    //获取每行的数量
    let sum = 0;
    let trs = $('.tb1_tbody').find('.trr');
    trs.each(function (inx, ele) {
        if ($(ele).find('.tr_all').prop('checked')) {
            sum += parseInt($(ele).find('.num').val());
        }
    })
    $('.tb_ft .p22').find('.nums').text(parseInt(sum));
}

//总共价格
function getZongpri() {
    //获取每行的数量
    let sum = 0;
    let trs = $('.tb1_tbody').find('.trr');
    trs.each(function (inx, ele) {
        sum += parseInt($(ele).find('.xiaopri').text());
    })
    $('.tb_ft .p11').find('span').text(parseInt(sum));
}

//直接修改input框的内容
$('.tb1_tbody').on('change', '.num', function () {
    //input框内容改变时触发
    let inp_vv = $(this).val();
    //获取改变后的数字
    if (inp_vv != '') {
        let con = parseInt(inp_vv);
        console.log(1);
        //获取修改所在行商品的编号
        let id = $(this).parent().parent().parent().find('img').attr('gdsid');
        if (con <= 0) {
            //用户输入数字小于1时,默认为1
            $(this).val(1);
            changeCon(id, 1);
            getXiao($(this), 1);
            getZongnun();
            getZongpri();
        } else {
            changeCon(id, con);
            getXiao($(this), con);
            getZongnun();
            getZongpri();
        }
    } else {
        console.log(0);
        alert('请输入数字!');
    }

})


//点击删除，渲染下方被删除的商品列表
function getDeleshop(obj) {
    //获取商品数量，描述信息，数量，总价等
    let des = obj.parent().parent().parent().find('.cont1').text();
    let con = obj.parent().parent().parent().find('.num').val();
    let pris = obj.parent().parent().parent().find('.xiaopri').text();
    let str = '';
    str += `
        <tr>
            <td>
                <p class="d1">${des}</p>
            </td>
            <td>
                <p>×<span class="num2">${con}</span></p>
            </td>
            <td>
                <p>
                    ¥<span class="del_pri">${pris}</span>.00
                </p>
            </td>
            <td>
                <button>重新购买</button>
            </td>
        </tr>  
    `
    $('.de_tbb').html(str);

}

//点击已删除商品下重新购买按钮
function chongBy(id) {
    $('.de_tbb').on('click', 'button', function () {
        //删除已删除的tr
        let des = $(this).parent().parent().find('.d1').text();
        let con = $(this).parent().parent().find('.num2').text();
        let pris = $(this).parent().parent().find('.del_pri').text();
        let str = '';

        str += `
        <tr class="trr">
                    <td>
                        <input type="checkbox" class="tr_all">
                    </td>
                    <td><img src="" alt="" gdsid="${id}"></td>
                    <td>
                        <p class="cont1">${des}</p>
                        <p class="cont_color"></p>
                        <p class="cont2">分期免息</p>
                    </td>
                    <td>
                        <p>
                            ¥<span class="danjia"></span>.00
                        </p>
                    </td>
                    <td>
                        <p>
                            <input type="button" value="-" class="jian">
                            <input type="text" class="num" value="${con}">
                            <input type="button" value="+" class="jia">
                        </p>
                    </td>
                    <td>
                        <p>
                            ¥<span class="xiaopri">${pris}</span>.00
                        </p>
                    </td>
                    <td>
                        <p><a href="javascript:;" class="dele">删除</a></p>
                    </td>
                </tr>          
        `
        $('.tb1_tbody').html(htmlStr);

        $(this).parent().parent().remove();

    })
}


